<style lang="sass" rel="stylesheet/scss">

$width: 1348px;

.rd-swipe {
    /*height: 742px;*/
    height: 495px;
    width:100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.rd-swipe-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    box-sizing: content-box;
    background-size: auto 100%;
    /*background-position: center;*/
    /*background-repeat: repeat;*/
    background-color:#212121;
}
.rd-swipe-item {
    width: 100%;
    flex-shrink: 0;
    height: 100%;
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
}
.circle-box {
    width: $width;
    margin: 0 auto;
    position: relative;
    left: 0;
}
.rd-swipe-pagination {
    position: absolute;
    bottom: 48px ;
    left: 50%;
    transform:translate(-50%,0);
    /*display: flex;*/
    z-index: 1;
}
.rd-swipe-pagination-item {
    display: inline-block;
    margin: 0 4px;
    width: 16px;
    height: 4px;
    background-color: #fff;
    opacity: .2;
    z-index: 1;
    cursor:pointer;
}

.rd-swipe-pagination-item--active{
    opacity: 1;
}
.rd-swipe-pagination-item.active {
    opacity: 1;
}

.rd-circle {
    width: $width;
    margin: 0 auto;
    position: relative;
}
.rd-item-img{
    width: 16px;
}


</style>
<template>
    <div class="rd-swipe" ref='swipe'>
        <div class="rd-swipe-wrapper" :style="wrapperStyle">
            <slot></slot>
        </div>
        <div class="rd-circle">
            <div class="rd-swipe-pagination" v-if="options.pagination && pagination.length>1">
                <div class="rd-swipe-pagination-item"
                     :class="{ 'active': item.active }"
                     v-for="(item, index) in pagination"
                     @click="turnTo(index)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import CovTouch from './cov-touch'

    const _ = {
        on (el, type, handler) {
            el.addEventListener(type, handler, false)
        },
        off (el, type, handler) {
            el.addEventListener(type, handler, false)
        }
    }

    export default {
        props: {
            swipe: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data () {
            return {
                $wrapper: null,
                $touch: null,
                timer: null,
                pagination: [],
                swiper: {
                    swiping: false,
                    rect: {
                        width: 0,
                        height: 0
                    },
                    count: 0,
                    index: 0,
                    options: {}
                },
                position: {
                    x: 0,
                    y: 0,
                    z: 0
                },
                options: {
                    activeIndex: 0,
                    autoplay: 1000,
                    pagination: true
                },
                turnToIndex:''
            }
        },
        computed: {
            wrapperStyle () {
                if (this.swiper.swiping) {
                    return {
                        transform: `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`,
                        '-webkit-transform': `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`
                    }
                } else {
                    return {
                        transform: `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`,
                        '-webkit-transform': `translate3d(-${this.position.x}px, ${this.position.y}px, ${this.position.z}px)`,
                        transition: 'all .3s',
                        '-webkit-transition': 'all .3s',
                    }
                }

            }
        },
        mounted () {
            this.init();
            $(window).bind('resize', this.init);


        },
        beforeDestroy () {
            if (this.$touch) {
                this.$touch.destroy()
            }
        },
        methods: {
            init ()  {
                this.options = $.extend(this.options, this.swipe)
                this.$wrapper = this.$el.getElementsByClassName('rd-swipe-wrapper')[0]
                this.swiper.count = this.$el.getElementsByClassName('rd-swipe-item').length
                this.swiper.rect = this.$el.getBoundingClientRect()

                if (this.options.pagination) {
                    let arrs = [];
                    for (let i = 0, len = this.swiper.count; i < len; i++) {
                        arrs.push({
                            index: i,
                            active: i === 0
                        });
                    }
                    this.pagination = arrs;
                }

                if (this.swipe.autoplay) {
                    this.initSwipe();
                    this.startAutoPlay(this.swipe.autoplay)
                }
            },
            initSwipe () {

               this.$refs.swipe.onmouseover = function() {
                   this.stopAutoPlay();
               }.bind(this);
               this.$refs.swipe.onmouseout = function() {
                   this.startAutoPlay();
               }.bind(this)
                if (this.$touch) {
                    this.$touch.destroy();
                }
                this.$touch = new CovTouch({el: this.$el })

                this.$touch.listen('swipe-left', null, () => {
                    this.swiper.swiping = false
                    this.next()
                })
                this.$touch.listen('swipe-right', null, () => {
                    this.swiper.swiping = false
                    this.pre()
                })
                let movediff = 0

                this.$touch.listen('swiping', null, (start, end) => {
                    this.swiper.swiping = true
                    let move = start.x - end.x
                    this.position.x += (move - movediff)
                    movediff = move
                })

                this.$touch.listen('swiped', null, (start, end) => {
                    movediff = 0
                    this.swiper.swiping = false;
                })
            },
            startAutoPlay (delay) {
                this.stopAutoPlay()
                this.timer = setInterval(this.play, delay || this.options.autoplay)
            },
            stopAutoPlay () {
                if (this.timer) {
                    window.clearInterval(this.timer)
                    window.clearTimeout(this.timer)
                    this.timer = null
                }
            },
            play () {
                if (this.swiper.index === (this.swiper.count - 1)) {
                    this.swiper.index = -1
                }
                if (this.swiper.swiping) return
                this.next()
            },
            next () {
                if (this.swiper.index < this.swiper.count - 1) {
                    this.swiper.index++
                }
                this.position.x = (this.swiper.rect.width * this.swiper.index)
                this.checkOut()
            },
            pre () {
                if (this.swiper.index > 0) {
                    this.swiper.index--
                }
                this.position.x = (this.swiper.rect.width * this.swiper.index)
                this.checkOut()
            },
            turnTo (index) {
                index = Math.floor(index);
                if (index < -1 || index > this.swiper.count) return console.error('invaild index: ', index)
                this.stopAutoPlay()
                this.swiper.index = index
                this.position.x = (this.swiper.rect.width * index)
                this.checkOut()
                this.turnToIndex = index;
                $('.rd-swipe-pagination-item--active').animate({'top':  + 40 * index+'px'}, "fast");
                this.timer = setTimeout(() => {
                    this.startAutoPlay()
                }, this.swipe.autoplay * 2);
            },
            setPaginationActive (index) {
                this.pagination.forEach(item => item.active = false)
                this.pagination[index].active = true
            },
            checkOut () {
                this.swipe.activeIndex = this.swiper.index
                if (this.options.pagination) {
                    this.setPaginationActive(this.swiper.index)
                }
                if (this.position.x > (this.swiper.rect.width * this.swiper.count)) {
                    this.position.x = (this.swiper.rect.width * this.swiper.count)
                }
                if (this.position.x < 0) {
                    this.position.x = 0
                }

                setTimeout(()=>{
                    if(this.turnToIndex === ''){
                        $('.rd-swipe-pagination-item--active').animate({'top':  + 40 * this.swiper.index+'px'}, "fast");
                    }else{
                        this.turnToIndex = '';
                    }
                },0)
            }
        }
    }
</script>